<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="stylus/index.css">
</head>

<body>
<header id="header">
  <div class="center">
    <ul class="fl">
      <li><a href="javascript:;">小米商城</a></li>
      <li><a href="javascript:;">MIUI</a></li>
      <li><a href="javascript:;">米聊</a></li>
      <li><a href="javascript:;">游戏</a></li>
      <li><a href="javascript:;">多看阅读</a></li>
      <li><a href="javascript:;">云服务</a></li>
      <li><a href="javascript:;">金融</a></li>
      <li><a href="javascript:;">小米商城移动版</a></li>
      <li><a href="javascript:;">问题反馈</a></li>
      <li><a href="javascript:;">Select Region</a></li>
    </ul>
    <div class="fr">
      <div class="user">
        <ul class="selector">
          <li>
            <a href="javascript:;">
              个人中心
            </a>
          </li>
          <li>
            <a href="javascript:;">
              我的订单
            </a>
          </li>
          <li>
            <a href="javascript:;">
              账号设置
            </a>
          </li>
          <li>
            <a href="javascript:;" class="goHome">
              退出登录
            </a>
          </li>
        </ul>
        <a href="javascript:;" class="username">
          请登录
          <i class="iconfont icon-jiantou_xiangxia1"></i>
        </a>
      </div>
      <ul class="login">
        <li><a href="./login.html">登录</a></li>
        <li><a href="">注册</a></li>
      </ul>
      <div class="shopcart">
        <i class="iconfont icon-cart"></i>
        购物车(3)
      </div>
    </div>
  </div>
</header>

<content id="content">

  <nav id="nav">
    <div class="banner_x center">
      <a href="javascript:;" class="logo"><h1>小米官网</h1></a>
      <a href="javascript:;" class="gif"></a>
      <ul class="list">
        <li><a href="./search.html">秒杀</a></li>
        <li><a href="javascript:;">优惠券</a></li>
        <li><a href="javascript:;">闪购</a></li>
        <li><a href="javascript:;">拍卖</a></li>
        <li><a href="javascript:;">小米服饰</a></li>
        <li><a href="javascript:;">小米超市</a></li>
        <li><a href="javascript:;">生鲜</a></li>
        <li><a href="javascript:;">全球购</a></li>
        <li><a href="javascript:;">京东金融</a></li>
      </ul>
      <div class="fr">
        <div class="search">
          <input class="text" type="text">
          <div class="search_hot">
            <a href="javascript:;">小米8</a>
            <a href="javascript:;">小米MIX 2S</a>
          </div>
          <ul class="keyword_list">
            <li>
              <a href="./search.html">
                <span>小米手机ikun版</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米pro2s</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米电视</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米冰箱</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米电脑</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米之家</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米ipad</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米手环</span>
                <span class="result">约有6件</span>
              </a>
            </li>
            <li>
              <a href="./search.html">
                <span>小米米</span>
                <span class="result">约有6件</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="button iconfont icon-search"></div>
      </div>
    </div>
  </nav>

  <div id="banner">
    <div id="cate_menu" class="fl">
      <ul>
        <li>
          <a href="">手机</a>
          <a href="">电话卡</a>
        </li>
        <li>
          <a href="">笔记本</a>
          <a href="">平板</a>
        </li>
        <li>
          <a href="">电视</a>
          <a href="">盒子</a>
        </li>
        <li>
          <a href="">路由器</a>
          <a href="">智能硬件</a>
        </li>
        <li>
          <a href="">移动电源</a>
          <a href="">电池</a>
          <a href="">插线板</a>
        </li>
        <li>
          <a href="">耳机</a>
          <a href="">音箱</a>
        </li>
        <li>
          <a href="">保护套</a>
          <a href="">贴膜</a>
        </li>
        <li>
          <a href="">线材</a>
          <a href="">支架</a>
          <a href="">储存卡</a>
        </li>
        <li>
          <a href="">箱包</a>
          <a href="">服饰</a>
          <a href="">鞋</a>
          <a href="">眼镜</a>
        </li>
        <li>
          <a href="">米兔</a>
          <a href="">生活周边</a>
        </li>
        <li>
          <ul class="pop">
            <li class="clearfix">
              <div class="title">
                手机通讯
                <i class="iconfont icon-jiantou_xiangyou"></i>
              </div>
              <ul class="list">
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
              </ul>
            </li>
            <li class="clearfix">
              <div class="title">
                手机通讯
                <i class="iconfont icon-jiantou_xiangyou"></i>
              </div>
              <ul class="list clearfix">
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
              </ul>
            </li>
            <li class="clearfix">
              <div class="title">
                手机通讯
                <i class="iconfont icon-jiantou_xiangyou"></i>
              </div>
              <ul class="list">
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
              </ul>
            </li>
            <li class="clearfix">
              <div class="title">
                手机通讯
                <i class="iconfont icon-jiantou_xiangyou"></i>
              </div>
              <ul class="list clearfix">
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
              </ul>
            </li>
            <li class="clearfix">
              <div class="title">
                手机通讯
                <i class="iconfont icon-jiantou_xiangyou"></i>
              </div>
              <ul class="list">
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
              </ul>
            </li>
            <li class="clearfix">
              <div class="title">
                手机通讯
                <i class="iconfont icon-jiantou_xiangyou"></i>
              </div>
              <ul class="list clearfix">
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
                <li>
                  <a href="">
                    手机
                  </a>
                </li>
                <li>
                  <a href="">
                    游戏手机
                  </a>
                </li>
                <li>
                  <a href="">
                    老人机
                  </a>
                </li>
                <li>
                  <a href="">
                    以旧换新
                  </a>
                </li>
                <li>
                  <a href="">
                    手机维修
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="swiper-container fl">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./image/swiper/swiper1.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./image/swiper/swiper2.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./image/swiper/swiper3.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./image/swiper/swiper4.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

  <div id="sub_banner">
    <div class="selector">
      <a class="sidebar" href="javascript:;">
        <img src="./image/sub_banner/hjh_01.gif" alt="">
      </a>
      <a class="sidebar" href="javascript:;">
        <img src="./image/sub_banner/hjh_02.gif" alt="">
      </a>
      <a class="sidebar" href="javascript:;">
        <img src="./image/sub_banner/hjh_03.gif" alt="">
      </a>
      <a class="sidebar" href="javascript:;">
        <img src="./image/sub_banner/hjh_04.gif" alt="">
      </a>
      <a class="sidebar" href="javascript:;">
        <img src="./image/sub_banner/hjh_05.gif" alt="">
      </a>
      <a class="sidebar" href="javascript:;">
        <img src="./image/sub_banner/hjh_06.gif" alt="">
      </a>
    </div>
    <div class="bigImg">
      <a href="javascript:;">
        <img src="./image/sub_banner/hongmi4x.png" alt="">
      </a>
    </div>
    <div class="bigImg">
      <a href="javascript:;">
        <img src="./image/sub_banner/xiaomi5.jpg" alt="">
      </a>
    </div>
    <div class="bigImg">
      <a href="javascript:;">
        <img src="./image/sub_banner/pinghengche.jpg" alt="">
      </a>
    </div>
  </div>

  <div id="flash">
    <h2>小米闪购</h2>
    <ul>
      <li class="time">
        <a href="javascript:;">
          <p class="name">14:00 场</p>
          <img src="./image/flash/flashshop.png" alt=""/>
          <p class="text">距离结束还有</p>
          <div class="flashTime">
            <div class="box hour">00</div>
            <div class="dosh">:</div>
            <div class="box minute">40</div>
            <div class="dosh">:</div>
            <div class="box second">32</div>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./image/flash/pinpai1.png" alt=""/>
          <p class="name">小米MIX</p>
          <p class="discount">5月9日-21日享花呗12期分期免息</p>
          <p class="price">3499元起</p>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./image/flash/pinpai2.png" alt=""/>
          <p class="name">小米MIX</p>
          <p class="discount">5月9日-21日享花呗12期分期免息</p>
          <p class="price">3499元起</p>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./image/flash/pinpai3.png" alt=""/>
          <p class="name">小米MIX</p>
          <p class="discount">5月9日-21日享花呗12期分期免息</p>
          <p class="price">3499元起</p>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./image/flash/pinpai4.png" alt=""/>
          <p class="name">小米MIX</p>
          <p class="discount">5月9日-21日享花呗12期分期免息</p>
          <p class="price">3499元起</p>
        </a>
      </li>
    </ul>
  </div>

  <div id="recommend">
    <h2>为你推荐</h2>
    <a href="javascript:;" class="more">查看更多>></a>
    <ul>
      <li>
        <a href="javascript:;">
          <div class="info new">
            新品
          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info new">
            新品
          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info discount">
            享6折
          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info new">
            新品
          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info new">
            新品
          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info new">
            新品
          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info">

          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info new">
            新品
          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info">

          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <div class="info">

          </div>
          <img src="./image/recommend/peijian2.jpg" alt="">
          <p class="name">小米6 硅胶保护套</p>
          <p class="price">49元</p>
          <p class="counter">372人评价</p>
          <div class="comment">
            <p>发货速度很快！很配小米6！</p>
            <p>来至于mi狼牙的评价</p>
          </div>
        </a>
      </li>
    </ul>
  </div>
</content>

<footer id="footer">
  <p>小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</p>
  <p>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p>
  <p>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</footer>
<script src="./js/axios.min.js"></script>
<script src="./js/first.js"></script>
<script src="./js/time.js"></script>
<script src="js/swiper.min.js" type="text/javascript"></script>
<script>
  var mySwiper = new Swiper('.swiper-container', {
    //设置自动播放
    autoplay: {
      delay: 2000,
      disableOnInteraction: false
    },
    //设置无限循环播放
    loop: true,
    //设置圆点指示器
    pagination: {
      el: '.swiper-pagination',
    },
    //设置上下页按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })
</script>
</body>

</html>